<template>
  <el-button type="primary" @click="clear">清除</el-button>
  <el-button type="primary" @click="back">清除上一步</el-button>
  <el-button type="primary" @click="toUrl">保存url</el-button>
  <div class="box">
    <canvas id="sign"></canvas>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import Signature from 'font-sign'
let s = null

onMounted(() => {
  let params = {
    lineCap: 'round'
  }
  s = new Signature('sign', params)
})

// 清除画布
const clear = () => {
  s.clear()
}

const back = () => {
  s.back()
}
const toUrl = () => {
  console.log(s.toBase64());
  console.log(s.toFile());
}

</script>

<style lang="scss" scoped>
canvas{
  border: 1px solid #000;
}
.box {
  width: 100%;
  height: 100%;
}
</style>
